<template>
  <div class="ad_carousel">
    <!-- 单图和轮播图在同一个分组里面 -->
    <!-- 单图 -->
    <div v-if="typeStyle === 'img'" class="ad_img" :style="'height:'+ attr.height + 'px'">
      <!--      <el-image :src="attr.base64Src" />-->
      <img :src="attr.base64Src || require('@/assets/default.jpg')">
    </div>
    <!-- 组图 -->
    <el-carousel v-else :height="attr.height + 'px'" :loop="attr.loop" :indicator-position="attr.indicator" :autoplay="attr.autoplay" :type="typeStyle === 'swipe_card'? 'card' : ''">
      <el-carousel-item v-for="(item, index) in attr.base64Src" :key="index">
        <el-image fit="cover" class="carousel_img" :src="item.src || require('@/assets/default.jpg')" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import Vue from 'vue'
import { Carousel, CarouselItem, Image } from 'element-ui'
import { mapGetters } from 'vuex'
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(Image)
export default {
  name: 'Carousel',
  props: {
    typeStyle: {
      type: String,
      default: 'img'
    },
    attr: {
      type: Object,
      default: Object
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters([
      'viewData',
      'iphoneIndex'
    ])
  },
  mounted() {
    // console.log(this.viewData)
    // console.log(this.attr)
  },
  methods: {}
}
</script>

<style scoped lang="scss">
    .ad_carousel {
      width: 100%;
      .carousel_img {
        width: 100%;
        height: 100%;
      }
      .ad_img {
        width: 100%;
        position: relative;
        height: 8.96rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
</style>
